<template>
  <common-list-group class="audit-container">
    <div
      slot="group"
      class="group-list-component-wrap"
      v-loading="isGroupLoading"
    >
      <div class="group-header-wrap">
        <div class="group-header-title">审计组件列表</div>
      </div>
      <common-tree
        ref="treeRef"
        :is-slot="true"
        :tree-data="typeList"
        :tree-prop="{ isLeaf: 'leaf' }"
        :current-node-key="currentNodeId"
        @handleNodeClick="groupClick"
        search-placeholder="查询审计组件"
        is-show-icon-for-no-child
        set-node-by-key="leaf"
      >
        <div slot-scope="{ scope }" class="tree-item-wrap">
          <common-carousel-text :content="scope.data.name" :font-size="14" />
        </div>
      </common-tree>
    </div>

    <div slot="content" class="right-content">
      <preview
        v-if="componentId"
        :id="componentId"
        :isShowBack="false"
      ></preview>
      <common-empty-data v-else></common-empty-data>
    </div>
    <!--    <div slot="pagination">-->
    <!--      <dimension-content :content="content"></dimension-content>-->
    <!--    </div>-->
  </common-list-group>
</template>
<script>
import { queryAuditAllTree } from "@/api/audit";
import preview from "@/views/screenConfig/dataComponents/preview";
import DimensionContent from "./components/dimensionContent";
export default {
  components: {
    preview,
    DimensionContent,
  },
  data() {
    return {
      typeList: [],
      isGroupLoading: false,
      menuName: "",
      id: "",
      content: "",
      currentNodeId: "",
      currentData: "",
      componentId: "",
    };
  },
  mounted() {
    this.getTreeList();
  },
  methods: {
    groupClick({ data }) {
      if (data && data.id && data.leaf) {
        this.componentId = data.id;
        this.content = data.analysis;
      } else {
        this.componentId = "";
        this.content = "";
      }
    },

    getTreeList() {
      this.isGroupLoading = true;
      queryAuditAllTree({})
        .then((res) => {
          if (res && res.code === 200) {
            this.typeList = res.data || [];
            this.getFirstData(this.typeList);
            this.groupClick({ data: this.currentData });
          } else {
            this.typeList = [];
          }
        })
        .finally(() => {
          this.isGroupLoading = false;
        });
    },

    getFirstData(data) {
      if (data.length > 0) {
        try {
          data.forEach((f) => {
            if (f.chartType && f.leaf) {
              this.currentNodeId = f.id;
              this.currentData = f;
              throw Error();
            }
            if (!this.currentNodeId && f.children && f.children.length > 0) {
              this.getFirstData(f.children);
            }
          });
        } catch (err) {
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.audit-container {
  .group-header-wrap {
    height: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .group-header-title {
      font-size: 14px;
    }
  }
}
.tree-item-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}
.right-content {
  height: 100%;
}
</style>
